<template>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
     v-model="loading"
     :finished="finished"
     offset=5
     @load="onLoad"
     class="contents_list">
        <div v-for="(item,index) in list" :key="index" class="content_one">
            <router-link :to="{path:'/content/', query:{id:item.content_id}}">
                <!-- 图片 -->
                <img style="width:100%;border-radius:3%" :src="item.image" alt=""><br/>
                <!-- 标题 -->
                <span style="font-size:80%; font-weight:bold; word-wrap:break-word; word-break:break-all">
                    {{ item['title'] }}<br/>
                    <!-- 用户 -->
                    <span style="font-size:80%;width:70%;height:100%">
                        <img :src="item.writer_image" alt="" 
                              style="width:15%;height:15%;border-radius:100%;float:left">
                        <span style="float:left;margin-top:5%">{{ item['writer_name'] }}</span>
                    </span>
                    <!-- 点赞 -->
                    <span style="font-size:80%;width:30%;height:100%">
                        <span style="float:right;margin-top:5%">{{ item['goods'] }}</span>
                        <img src="https://gaf.oss-cn-beijing.aliyuncs.com/sysneed/like.png" alt="" 
                          style="width:15%;height:15%;border-radius:100%;float:right">
                    </span>
                </span>
            </router-link>
        </div>
        <p slot="loading" style="column-span:all">waiting</p>
        <p slot="finished" style="column-span:all">我是有底线的🐎</p>
    </van-list>
</van-pull-refresh>
    
</template>

<script>
import Vue from 'vue';
import { PullRefresh } from 'vant';
import 'vant/lib/pull-refresh/style'
import { Toast } from 'vant';
import 'vant/lib/toast/style'
import { List } from 'vant';
import 'vant/lib/list/style'

Vue.use(List)
Vue.use(Toast)
Vue.use(PullRefresh)
export default{
    props:["name"],
    mounted: function(){
        this.onRefresh()
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            data_lenth: 0,
        };
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                // for (let i = 0; i < 10; i++) {
                //     this.list.push(this.list.length + 1);
                // }
                this.$axios.get('get_data/find_index/',{
                    params:{
                        "content_type":this.name,
                        "data_lenth":this.data_lenth,
                    }
                }).then(res=>{
                        if (res.data['data'].length == 0) {
                            this.finished = true
                        }
                        else{
                            // this.list.contact(res.data['data'])
                            for (let i in res.data['data']) {
                                this.list.push(res.data['data'][i])
                            }
                            this.data_lenth = this.data_lenth + this.list.length
                        }
                    })
                this.loading = false;
                // if (this.list.length >= 40) {
                //     this.finished = true;
                // }
            }, 1000);
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
            this.data_lenth = 0
        },
    },
}
</script>

<style>
.contents_list{
	column-count: 2;  /* 把这个div下面的元素拆分为两列 */
    column-gap: 2%;	  /* 列与列之间的距离 */
    height: 100%;
}
.content_one{
	/* break-inside: avoid;  这个div下的元素视为整体不被拆分 */
    display: inline-block;
}
</style>
